<!--
/**
* @description: markdown
* @author: 徐攀
* @date: 2021-06-17 17:05:17
*/
-->

<template>
    <div :class="['markdown', {'markdown-detail': isDetail}]">
        <!-- 
            toolbars：顶部按钮配置
            toolbarsFlag： 是否有顶部toolBar
            editable: 是否可编辑
            subfield：是否打开双屏编辑
            scrollStyle：滚动条样式
            navigation：是否默认展示目录
            ishljs: 代码高亮
            shortCut: 是否启用快捷键
         -->
        <mavon-editor 
            :class="['markdown-editor-body', {'no-menu': !hasMenu}]"
            v-model="content" 
            :toolbars="{ ...toolbars, navigation: isDetail }"
            :subfield="isDetail? false : subfield"
            :toolbarsFlag="isDetail? false : toolbarsFlag"
            :editable="isDetail? false : editable"
            :scrollStyle="scrollStyle"
            :navigation="isDetail? true : navigation"
            previewBackground="#fff"
            boxShadowStyle="0"
            defaultOpen="preview"
            ref="md" 
            :imageFilter="imageFilter"
            @imgAdd="$imgAdd" 
            @change="handleChange"
            :style="{ height: height, width: '100%', borderRadius: '0' }"
            ishljs
            :shortCut="false"
        >   
            <template slot="left-toolbar-before">
                <button
                    @click="addCode('&nbsp;&nbsp;&nbsp;&nbsp;')"
                    class="el-icon-s-unfold btn-editor"
                    aria-hidden="true"
                    title="首行缩进"
                ></button>
            </template>
        </mavon-editor>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import { toolBars } from './modules/markDownToolBars.js'
    import axios from "@/api/axios";
    import 'mavon-editor/dist/css/index.css'
    const contentStr = `# 一、功能说明  

# 二、操作说明  

# 三、常见QA  

# 四、其他相关文档`
    export default {
        name: "markDownEdit",
        props: {
            value: { // 初始值
                type: String,
                default: () => ''
            },
            navigation: { // 是否默认展示目录
                type: Boolean,
                default: () => false
            },
            editable: { // 是否可编辑
                type: Boolean,
                default: () => true
            },
            toolbarsFlag: { // 是否展示toolBar
                type: Boolean,
                default: () => true
            },
            scrollStyle: { // 滚动条样式
                type: Boolean,
                default: () => true
            },
            subfield: { // 是否默认打开双屏编辑
                type: Boolean,
                default: () => true
            },
            isDetail: { // 是否详情
                type: Boolean,
                default: () => false
            },
            limitImgSize: { // 图片上传大小限制
                type: [String, Number],
                default: () => 10
            },
            height: { // markDown高度
                type: String,
                default: () => 'calc(100vh - 120px)'
            },
            hasMenu: { // 是否有目录
                type: Boolean,
                defalut: () => false
            }
            // dataForm: {
            //     type: Object,
            //     default () {
            //         return {
            //             mHeight: 'calc(100vh - 120px)',
            //             getUrl: '', /// 回显api
            //             uploadUrl: '', /// 上传api
            //             para: {}, /// 上传参数
            //         }
            //     }
            // },
        },
        components: {
            mavonEditor,
        },
        data() {
            return {
                isLoading: false,
                isFirstIn: true,
                 // 内容
                content: '',
                toolbars: toolBars, /// 配置项
                resourcesUrl: '', // 环境前缀
            }
        },
        watch: {
            // 监听props值改变 更改markdown内容
            value(newV, oldV) {
                console.log(newV, '------------ neaw');
                this.content = newV || contentStr
            }
        },
        created() {
            this.content = this.value
            if (this.value === '') {
                this.$emit('change', contentStr)
            }
            this.resourcesUrl = process.env.VUE_APP_BASE_API
            /// 如果没有
            // if (this.dataForm.getUrl) {
            //     this.initData()
            // }
        },
        methods: {
            addCode(content) {
                const editor = this.$refs.md
                //获取光标位置
                editor.insertText(editor.getTextareaDom(), {
                    prefix: `${content}`,
                    subfix: '',
                    str: ''
                })
            },
            // 图片校验大小
            imageFilter(file) {
                if (file.size > this.limitImgSize*1024*1024) {
                    this.$message.error(`上传图片大于${this.limitImgSize}M！`)
                    return false
                }
                return true
            },
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                this.isLoading = true
                const formData = new FormData();
                formData.append('file', $file, $file.name);
                axios({
                    method: "post",
                    url: this.resourcesUrl + '/inf-bridge-service/back/storage/file/upload',
                    data: formData,
                }).then(res => {
                    /// 上传成功 加入markdown 
                    this.$refs.md.$img2Url(pos, res.fileUrl)
                }).catch(err => {
                    /// 上传失败 删除markdown
                    this.$refs.md.$refs.toolbar_left.$imgDelByFilename($file.name)
                    this.$message.error(`${$file.name}'图片 - 上传失败'`)
                })
            },
            // 改变编辑器内容
            handleChange(value, render) {
                // console.log(value.indexOf('# 四、其他相关文档'));
                this.$emit('change', value)
            },
        },
        mounted() {

        }
    }
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/_handle.scss";
@import "@/styles/_themes.scss";
.markdown.markdown-detail{
    .markdown-editor-body{
        ::v-deep.v-note-navigation-wrapper{
            border-right: 0;
            width: 328px;
            .v-note-navigation-title{
                padding: 0 32px;
                font-size: 16px;
                font-weight: bold;
                color: rgba(0, 0, 0, .85);
                border-bottom: 0;
                height: 38px;
                line-height: 38px;
                padding-top: 8px;
            }
            .v-note-navigation-close{
                display: none !important;
            }
            .v-note-navigation-content{
                padding: 8px 20px;
                >h1,h2,h3,h4,h5,h6{
                    font-size: 14px;
                    color: rgba(0, 0, 0, .85);
                }
                
                >h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover{
                    @include font_color('colorTheme');
                }

            }
        }
        ::v-deep.v-note-show{
            padding-right: 328px;
        }

    }
    .markdown-editor-body.no-menu{
        ::v-deep.v-note-navigation-wrapper{
            width: 0;
        }
        ::v-deep.v-note-show{
            padding-right: 0;
        }
    }
}
.btn-editor{
    cursor: pointer;
    outline: none;
    border: none;
    background: none;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    color: rgba(0,0,0,0.6);
}
.btn-editor:hover{
    color: rgba(0,0,0,0.8);
    background: #e9e9eb;
}
</style>